<template>
	<div>
		<el-drawer
			:title="drawerTitle"
			:visible.sync="drawer"
			:direction="direction"
			:before-close="handleClose"
			custom-class="drawer-info"
			size="450px">
			<div class="drawer-container">
				<!-- 顶部标题区域 -->
				<div class="drawer-header">
					<div class="platform-badge">
						<el-tag :type="getPlatformTagType(objInfo.platform)" size="medium" effect="dark">
							{{ objInfo.platformName }}
						</el-tag>
						<span class="status-badge" :class="objInfo.status == 1 ? 'status-active' : 'status-inactive'">
							{{ objInfo.status == 1 ? "已启用" : "未启用" }}
						</span>
					</div>
					<div class="config-code">
						<span class="label">存储编码:</span>
						<span class="value">{{ objInfo.ftCode }}</span>
						<fortress-copy :copyData="objInfo.ftCode" class="copy-btn"></fortress-copy>
					</div>
				</div>

				<!-- 信息主体内容 -->
				<div class="info-main">
					<el-tabs v-model="activeTabName" type="border-card">
						<!-- 基本信息标签页 -->
						<el-tab-pane label="基本信息" name="basic">
							<div class="info-section">
								<!-- 基础信息卡片 -->
								<div class="info-card">
									<h3 class="section-title"><i class="el-icon-info"></i> 基础配置</h3>
									<div class="info-grid">
										<!-- 显示基础配置字段 -->
										<div class="grid-item">
											<div class="grid-label">平台类型</div>
											<div class="grid-value">{{ objInfo.platformName }}</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">存储编码</div>
											<div class="grid-value">{{ objInfo.ftCode }}</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">状态</div>
											<div class="grid-value">
												<el-tag size="small" :type="objInfo.status == 1 ? 'success' : 'danger'">
													{{ objInfo.status == 1 ? "已启用" : "未启用" }}
												</el-tag>
											</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">备注</div>
											<div class="grid-value">{{ objInfo.remark || '无' }}</div>
										</div>
									</div>
								</div>

								<!-- 平台特定配置卡片 -->
								<div class="info-card">
									<h3 class="section-title"><i class="el-icon-setting"></i> 平台配置</h3>

									<!-- 本地存储配置 -->
									<div v-if="objInfo.platform == '1'" class="info-grid">
										<div class="grid-item full-width">
											<div class="grid-label">文件存储位置</div>
											<div class="grid-value with-copy">
												{{ objInfo.ossPlatFormDto.localFilePosition }}
												<fortress-copy :copyData="objInfo.ossPlatFormDto.localFilePosition"></fortress-copy>
											</div>
										</div>
										<div class="grid-item full-width">
											<div class="grid-label">文件访问路径</div>
											<div class="grid-value with-copy">
												{{ objInfo.ossPlatFormDto.localFileUrl }}
												<fortress-copy :copyData="objInfo.ossPlatFormDto.localFileUrl"></fortress-copy>
											</div>
										</div>
									</div>

									<!-- 阿里云存储配置 -->
									<div v-if="objInfo.platform == '2'" class="info-grid">
										<div class="grid-item full-width">
											<div class="grid-label">访问域名</div>
											<div class="grid-value with-copy">
												{{ objInfo.ossPlatFormDto.aliyunEndpoint }}
												<fortress-copy :copyData="objInfo.ossPlatFormDto.aliyunEndpoint"></fortress-copy>
											</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">存储空间</div>
											<div class="grid-value">{{ objInfo.ossPlatFormDto.aliyunBucket }}</div>
										</div>
										<div class="grid-item full-width">
											<div class="grid-label">AccessKey</div>
											<div class="grid-value with-copy">
												<span class="sensitive-data">{{ objInfo.ossPlatFormDto.aliyunAccessKey }}</span>
												<fortress-copy :copyData="objInfo.ossPlatFormDto.aliyunAccessKey"></fortress-copy>
											</div>
										</div>
										<div class="grid-item full-width">
											<div class="grid-label">SecretKey</div>
											<div class="grid-value with-copy">
												<span class="sensitive-data">{{ objInfo.ossPlatFormDto.aliyunSecretKey }}</span>
												<fortress-copy :copyData="objInfo.ossPlatFormDto.aliyunSecretKey"></fortress-copy>
											</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">路径前缀</div>
											<div class="grid-value">{{ objInfo.ossPlatFormDto.aliyunPathPrefix || '无' }}</div>
										</div>
									</div>

									<!-- 京东云配置 -->
									<div v-if="objInfo.platform == '3'" class="info-grid">
										<!-- 京东云详细字段 -->
										<div class="grid-item full-width">
											<div class="grid-label">访问域名</div>
											<div class="grid-value with-copy">
												{{ objInfo.ossPlatFormDto.jdcloudEndpoint }}
												<fortress-copy :copyData="objInfo.ossPlatFormDto.jdcloudEndpoint"></fortress-copy>
											</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">地区编码</div>
											<div class="grid-value">{{ objInfo.ossPlatFormDto.jdcloudRegion }}</div>
										</div>
										<!-- 其他京东云字段 -->
									</div>

									<!-- 腾讯云配置 -->
									<div v-if="objInfo.platform == '4'" class="info-grid">
										<!-- 腾讯云详细字段 -->
										<div class="grid-item full-width">
											<div class="grid-label">访问域名</div>
											<div class="grid-value with-copy">
												{{ objInfo.ossPlatFormDto.cosEndpoint }}
												<fortress-copy :copyData="objInfo.ossPlatFormDto.cosEndpoint"></fortress-copy>
											</div>
										</div>
										<!-- 其他腾讯云字段 -->
									</div>

									<!-- Minio配置 -->
									<div v-if="objInfo.platform == '5'" class="info-grid">
										<div class="grid-item full-width">
											<div class="grid-label">访问域名</div>
											<div class="grid-value with-copy">
												{{ objInfo.ossPlatFormDto.endpoint }}
												<fortress-copy :copyData="objInfo.ossPlatFormDto.endpoint"></fortress-copy>
											</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">存储桶名称</div>
											<div class="grid-value">{{ objInfo.ossPlatFormDto.bucketName }}</div>
										</div>
										<div class="grid-item full-width">
											<div class="grid-label">AccessKey</div>
											<div class="grid-value with-copy">
												<span class="sensitive-data">{{ objInfo.ossPlatFormDto.accessKey }}</span>
												<fortress-copy :copyData="objInfo.ossPlatFormDto.accessKey"></fortress-copy>
											</div>
										</div>
										<div class="grid-item full-width">
											<div class="grid-label">SecretKey</div>
											<div class="grid-value with-copy">
												<span class="sensitive-data">{{ objInfo.ossPlatFormDto.secretKey }}</span>
												<fortress-copy :copyData="objInfo.ossPlatFormDto.secretKey"></fortress-copy>
											</div>
										</div>
									</div>
								</div>
							</div>
						</el-tab-pane>

						<!-- 创建信息标签页 -->
						<el-tab-pane label="创建信息" name="creation">
							<div class="info-section">
								<div class="info-card">
									<h3 class="section-title"><i class="el-icon-user"></i> 创建信息</h3>
									<div class="info-grid">
										<div class="grid-item">
											<div class="grid-label">创建人</div>
											<div class="grid-value">{{ objInfo.createUserName || '系统管理员' }}</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">创建部门</div>
											<div class="grid-value">{{ objInfo.createDeptName || '系统部门' }}</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">创建时间</div>
											<div class="grid-value">{{ objInfo.createTime || '未知' }}</div>
										</div>
										<div class="grid-item">
											<div class="grid-label">更新时间</div>
											<div class="grid-value">{{ objInfo.updateTime || '未知' }}</div>
										</div>
									</div>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>

				<!-- 抽屉底部操作区 -->
				<div class="drawer-footer">
					<el-button  @click="drawer = false">关闭</el-button>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import { configOssInfo } from "@/api/system/configoss.js"
export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			activeTabName: 'basic',
			objInfo: {
				ftCode: "",
				platform: "1",
				remark: "",
				status: 1,
				ossPlatFormDto: {},
				platformName: ""
			},
		}
	},
	computed: {
		drawerTitle() {
			return `存储配置详情 - ${this.objInfo.ftCode || ''}`;
		}
	},
	methods: {
		init(id) {
			this.activeTabName = 'basic';

			if (id) {
				this.drawer = true;
				configOssInfo(id).then(res => {
					this.objInfo = {
						...this.objInfo,
						...res.data,
					}
					this.setPlatformName();
				}).catch(err => {
					this.$message.error('获取详情失败: ' + (err.message || err));
				})
			}
		},
		// 获取平台标签类型
		getPlatformTagType(platform) {
			const typeMap = {
				'1': 'info',    // 本地存储
				'2': 'warning', // 阿里云
				'3': 'danger',  // 京东云
				'4': 'success', // 腾讯云
				'5': 'primary'  // Minio
			};
			return typeMap[platform] || 'info';
		},
		// 设置平台名称
		setPlatformName() {
			const platformMap = {
				'1': '本地存储',
				'2': '阿里云存储',
				'3': '京东云存储',
				'4': '腾讯云存储',
				'5': 'Minio存储'
			};
			this.objInfo.platformName = platformMap[this.objInfo.platform] || '未知平台';
		},
		// 编辑配置
		handleEdit() {
			this.$emit('edit', this.objInfo.id);
			this.drawer = false;
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
	},
}
</script>

<style lang="scss" scoped>
.drawer-container {
	height: 100%;
	display: flex;
	flex-direction: column;

	.drawer-header {
		padding: 16px 20px;
		border-bottom: 1px solid #f0f2f5;
		background-color: #fafafa;

		.platform-badge {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;

			.status-badge {
				padding: 2px 10px;
				border-radius: 12px;
				font-size: 12px;
				font-weight: 500;

				&.status-active {
					background-color: #f0f9eb;
					color: #67C23A;
				}

				&.status-inactive {
					background-color: #fef0f0;
					color: #F56C6C;
				}
			}
		}

		.config-code {
			display: flex;
			align-items: center;

			.label {
				font-size: 14px;
				color: #606266;
				margin-right: 8px;
			}

			.value {
				font-size: 16px;
				font-weight: 600;
				color: #303133;
			}

			.copy-btn {
				margin-left: 8px;
			}
		}
	}

	.info-main {
		flex: 1;
		overflow-y: auto;
		padding: 0;

		.el-tabs {
			height: 100%;

			/deep/ .el-tabs__header {
				margin-bottom: 0;
			}

			/deep/ .el-tabs__content {
				padding: 0;
				height: calc(100% - 40px);
				overflow-y: auto;
			}
		}

		.info-section {
			padding: 16px;

			.info-card {
				background-color: #fff;
				border-radius: 8px;
				padding: 16px;
				margin-bottom: 20px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

				&:last-child {
					margin-bottom: 0;
				}

				.section-title {
					font-size: 16px;
					font-weight: 600;
					color: #303133;
					margin: 0 0 16px 0;
					padding-bottom: 10px;
					border-bottom: 1px solid #f0f2f5;

					i {
						margin-right: 6px;
						color: #409EFF;
					}
				}

				.info-grid {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 16px;

					.grid-item {
						&.full-width {
							grid-column: span 2;
						}

						.grid-label {
							font-size: 13px;
							color: #909399;
							margin-bottom: 8px;
						}

						.grid-value {
							font-size: 14px;
							color: #303133;
							word-break: break-all;

							&.with-copy {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.sensitive-data {
									font-family: monospace;
									background-color: #f5f7fa;
									padding: 4px 8px;
									border-radius: 4px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									max-width: 300px;
								}
							}
						}
					}
				}
			}
		}
	}

	.drawer-footer {
		padding: 16px 20px;
		border-top: 1px solid #f0f2f5;
		display: flex;
		justify-content: flex-end;
		background-color: #fff;
	}
}

/* 抽屉组件样式覆盖 */
:deep(.drawer-info) {
	.el-drawer__header {
		margin-bottom: 0;
		padding: 16px 20px;
		font-size: 18px;
		font-weight: 600;
		color: #303133;
		border-bottom: 1px solid #f0f2f5;
	}

	.el-drawer__body {
		padding: 0;
		height: calc(100% - 55px);
		overflow: hidden;
	}
}
</style>
